<template>
    <view class="item" :class="tellName == 'left' ? 'item-left' : 'item-right'">
        <u-avatar src="../../static/logo.png"></u-avatar>
        <view class="bubble">
            <text class="chatTips">您好,我在武汉，你可以直接送过来吗，我有时间的话，可以自己过去拿</text>
        </view>
    </view>
</template>

<script setup>
defineProps({
    tellName: {
        type: String
    }
});
</script>

<style lang="scss" scoped>
.item {
    margin-top: 15px;
    display: flex;
    width: 100%;
    .bubble {
        max-width: 400px;
        padding: 10px;
        border-radius: 5px;
        position: relative;
        color: #000;
        word-wrap: break-word;
        word-break: normal;
        &:before {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
        }
    }
}
.item-left {
    .bubble {
        margin-left: 15px;
        background-color: #fff;
        &:before {
            border-left: 10px solid transparent;
            border-right: 10px solid #fff;
            left: -20px;
        }
    }
}
.item-right {
    flex-direction: row-reverse;
    .bubble {
        margin-right: 15px;
        background-color: #9eea6a;
        &:before {
            border-left: 10px solid #9eea6a;
            border-right: 10px solid transparent;
            right: -20px;
        }
    }
}
</style>
